<%@ page pageEncoding="UTF-8"%>
<%@ taglib prefix="cw" uri="/widget-tags"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<cw:base />
		<script type="text/javascript">
			function getSexData() {
				return [ [ 1, '男' ], [ 2, '女' ] ];
			}
			
			function showImage(v,m,r) {
		 		return "<img src=<s:url value='/'/>" + v + "></img>";
		  	}
		</script>
	</head>
	<body>
		<cw:window url="${pageContext.request.contextPath }/sample/component/grid/query.jsp" id="see" width="600" height="300" title="查看明细"></cw:window>
		<ul>
			<li>
				<cw:fieldSet title="不分页表格导出" content="exportGrid1Div" collapsible="true" collapsed="false"/>
				<div id="exportGrid1Div">
					<cw:grid id="exportGrid1" title="" url="${pageContext.request.contextPath }/sample/grid/grid.query.action"
						enablePage="false" exportable="true" selectMode="checkbox" urlParams="{id:0}" stripeRows="true" 
						stripleColor="#DBEEF4" autoLoad="true" showGlobalStat="true" forceFit="true" pageSize="5">
						<cw:indexColumn indexWidth="60"/>
						<cw:gridColumn property="name" width="10%" title="姓名" align="center"/>
						<cw:gridColumn property="email" width="15%" align="center"/>
						<cw:gridColumn property="age" width="10%" title="年龄" summaryType="average" summaryDecimalPrecision="0" align="center"/>
						<cw:gridColumn property="birthday" width="15%" dataType="date" format="Y-m-d" align="center"/>
						<cw:gridColumn property="sex" width="10%" rendererData="[[1,'男'],[2,'女']]" align="center"/>
						<cw:gridColumn property="created" width="15%" title="创建时间" dataType="date" format="Y-m-d" align="center"/>
					</cw:grid>
				</div>
			</li>
		</ul>
		<hr>
		<ul>
			<li>
				<cw:fieldSet title="分页表格前台导出" content="exportGrid2Div" collapsible="true" collapsed="false"></cw:fieldSet>
				<div id="exportGrid2Div">
					<cw:grid id="exportGrid2" title="" url="${pageContext.request.contextPath }/sample/grid/gridpage.query.action"
						enablePage="true" exportable="true" selectMode="checkbox" urlParams="{id:0}" stripeRows="true" stripleColor="#DBEEF4" 
						autoLoad="true" showGlobalStat="true" summaryText="统计值" forceFit="true" pageSize="5">
						<cw:indexColumn indexWidth="60"/>
						<cw:gridColumn property="name" width="10%" title="姓名" align="center"/>
						<cw:gridColumn property="email" width="15%" align="center"/>
						<cw:gridColumn property="age" width="10%" title="年龄" summaryType="average" summaryDecimalPrecision="0" align="center"/>
						<cw:gridColumn property="birthday" width="15%" dataType="date" format="Y-m-d" align="center"/>
						<cw:gridColumn property="sex" width="10%" rendererData="[[1,'男'],[2,'女']]" align="center"/>
						<cw:gridColumn property="created" width="15%" title="创建时间" dataType="date" format="Y-m-d" align="center"/>
					</cw:grid>
				</div>
			</li>
		</ul>
		<hr>
		<ul>
			<li>
				<cw:fieldSet title="分页表格后台导出" content="exportGrid3Div" collapsible="true" collapsed="false"></cw:fieldSet>
				<div id="exportGrid3Div">
					<cw:grid id="exportGrid3" title="" url="${pageContext.request.contextPath }/sample/grid/gridpage.querySummary.action"
						enablePage="true" exportable="true" selectMode="checkbox" urlParams="{id:0}" stripeRows="true" stripleColor="#DBEEF4" 
						autoLoad="true" showGlobalStat="true" remoteGlobalStat="true" exportInServer="true" forceFit="true" pageSize="5">
						<cw:indexColumn indexWidth="60"/>
						<cw:gridColumn property="name" width="10%" title="姓名" align="center"/>
						<cw:gridColumn property="email" width="15%" align="center"/>
						<cw:gridColumn property="age" width="10%" title="年龄" summaryType="average" summaryDecimalPrecision="0" align="center"/>
						<cw:gridColumn property="birthday" width="15%" dataType="date" format="Y-m-d" align="center"/>
						<cw:gridColumn property="sex" width="10%" rendererData="[[1,'男'],[2,'女']]" align="center"/>
						<cw:gridColumn property="created" width="15%" title="创建时间" dataType="date" format="Y-m-d" align="center"/>
					</cw:grid>
				</div>
			</li>
		</ul>
		<hr>
		<ul>
			<li>
				<cw:fieldSet title="复杂分页表格（包含图片）后台导出" content="exportGrid4Div" collapsible="true" collapsed="false"></cw:fieldSet>
				<div id="exportGrid4Div">
					<cw:grid id="exportGrid4" title="" url="${pageContext.request.contextPath }/sample/grid/gridpage.querySummary.action"
						enablePage="true" exportable="true" selectMode="checkbox" urlParams="{id:0}" stripeRows="true" stripleColor="#DBEEF4" 
						autoLoad="true" showGlobalStat="true" remoteGlobalStat="true" exportInServer="true" forceFit="true" pageSize="5">
						<cw:indexColumn indexWidth="60"/>
						<cw:gridColumn property="name" width="8%" title="姓名" />
						<cw:gridColumn property="email" width="8%" />
						<cw:gridColumn property="age" width="10%" title="年龄" summaryType="average" summaryDecimalPrecision="0" />
						<cw:gridColumn property="birthday" width="15%" dataType="date" format="Y-m-d" />
						<cw:gridColumn property="sex" width="10%" rendererData="[[1,'男'],[2,'女']]" />
						<cw:gridColumn property="created" width="15%" title="创建时间" dataType="date" format="Y-m-d" />
				   		<!-- renderer渲染成超文本，#a('title').function，其中title为列的内容，function为实际调用的js函数 -->
				   		<cw:gridColumn property="id" width="10%" title="操作" renderer="#b('超链接').see"/>
						<cw:gridColumn property="image" width="20%" title="图像" renderer="function(v,m,r){return showImage(v,m,r);}"/>
					</cw:grid>
				</div>
			</li>
		</ul>
		<cw:theme></cw:theme>
		<script type="text/javascript">
			Ext.onReady(function(){
				var STORE1 = Ext.getCmp('exportGrid1').store;
				STORE1.on("load",function(s,r,o){
					resetHeight("exportGridFrame");
			    });
				
				var STORE2 = Ext.getCmp('exportGrid2').store;
				STORE2.on("load",function(s,r,o){
					resetHeight("exportGridFrame");
			    });
				
				var STORE3 = Ext.getCmp('exportGrid3').store;
				STORE3.on("load",function(s,r,o){
					resetHeight("exportGridFrame");
			    });
				
				var STORE4 = Ext.getCmp('exportGrid4').store;
				STORE4.on("load",function(s,r,o){
					resetHeight("exportGridFrame");
			    });
				
				resetHeight("exportGridFrame");
			})
		
			function resetHeight(frame) {
				var ifm = parent.document.getElementById(frame);
				var obj = document.body;
				var oStyle = obj.currentStyle? obj.currentStyle : window.getComputedStyle(obj, false);
				var initHeight = parseInt(document.body.clientHeight+parseInt(oStyle["margin-top"])+parseInt(oStyle["margin-bottom"]));
				ifm.height = parseInt(initHeight);
			}
		</script>
	</body>
</html>